<script setup>
  import {ref} from 'vue'
  const list = ref([
    {id: 1, name: '吃饭'},
    {id: 2, name: '睡觉'},
    {id: 3, name: '写代码'}
  ])
  const  addValue = ref('')
  const addItem = () =>{
    if(addValue.value){
      const newId = list.value.length > 0 ? Math.max(...list.value.map(item => item.id)) + 1 : 1
      list.value.push({name:addValue.value,id:newId})
      addValue.value = ''
    }
  }
  const cutItem = (id) =>{
    if(confirm('确定要删除吗？')) {
      list.value = list.value.filter(item => item.id !== id)
    }
  }
</script>

<template>
  <div>
    <div>
      <input type="text" v-model="addValue"> <button @click="addItem">添加</button>
    </div>
   
    <table border="">
      <thead>
        <th>标识</th>
        <th>待办事项</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <a @click="cutItem(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>